<template>
	<div class="home">
		<div class="banner">
			<mt-swipe :auto="4000">
				<mt-swipe-item v-for="item in banner"><img :src="item.picSrc" alt="" /></mt-swipe-item>
			</mt-swipe>
		</div>
		<MenuList />
		<!-- <div class="footer">
			<p>{{ footer.line1 }}</p>
			<p>{{ footer.line2 }}</p>
		</div> -->
	</div>
</template>

<script>
// @ is an alias to /src
import MenuList from '@/components/MenuList.vue';
import { Toast, Indicator } from 'mint-ui';

export default {
	name: 'home',
	components: {
		MenuList
	},
	data() {
		return {
			banner: [],
			//footer: {}
		};
	},
	mounted() {
		//loading
		Indicator.open();
		//专家数据
		this.$http
			.get('config.json')
			.then(res => {
				Indicator.close(); //关闭loading
				this.banner = res.data.banner;
				//this.footer = res.data.footer;
			})
			.catch(err => {
				Indicator.close(); //关闭loading
				Toast({
					message: '服务器请求失败',
					duration: 1000
				});
			});
	}
};
</script>

<style scoped lang="scss">
.home {
	height: 100vh;
	background-image:url(../assets/bg.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}
.banner {
	height: calc(100vw * 0.5625);
	img {
		width: 100%;
		height: 100%;
	}
}
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #666;
	padding: 8px 0;
	p {
		margin: 2px 0;
		color: #ccc;
		font-size: 0.8rem;
	}
}
</style>
